<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">进度查询</x-header>
    <div class="main-header">
      <div class="list">
        <div class="list-header">
          <div class="list-header-item">借款人</div>
          <div class="list-header-item">时间</div>
          <div class="list-header-item" @click="showPopup">{{statusList[current].title}}</div>
          <div class="triangle-bot"></div>
        </div>
        <transition name="fade">
          <div class="popup" v-if="popupShow">
            <div v-for=" (item,index) in statusList" :key="index" :class="[ current === item.id ? 'status-on':'status-off' ]" class="status" @click="chooseStatus(index)">{{item.title}}</div>
          </div>
        </transition>
        <div class="list-content">
          <group>
            <cell-box v-for=" (item, index) in processList" :key="index" :link="`processDetail?id=${item.id}`" is-link >
              <div class="list-content-row" >
                <div class="process-name">{{item.applyName}}</div>
                <div class="process-time">{{item.createTime}}</div>
                <div class="process-status" v-if="item.status === 1">已否决</div>
                <div class="process-status" v-else-if="item.status === 2">初审否决</div>
                <div class="process-status" v-else-if="item.status === 3">已放款</div>
                <div class="process-status" v-else-if="item.status === 4">申请中</div>
                <div class="process-status" v-else-if="item.status === 5">初审通过</div>
              </div>
            </cell-box>
          </group>

        </div>
      </div>
      <div class="mask" v-if="popupShow"></div>
    </div>
  </div>
</template>

<script>
import { progressQuery } from '@/api/home'
export default {
  name: 'process',
  data () {
    return {
      popupShow: false,
      current:0,
      statusList: [
        {
          id: 0,
          title: '全部状态'
        },

        {
          id: 1,
          title: '已否决'
        },
        {
          id: 2,
          title: '初审否决'
        },
        {
          id: 3,
          title: '已放款'
        },
        {
          id: 4,
          title: '申请中'
        },
        {
          id: 5,
          title: '初审通过'
        },
      ],
      processList: [
        {
          name: '王小二',
          time: '2019-01-22',
          status: 2
        },
        {
          name: '王小二',
          time: '2019-01-22',
          status: 3
        },
        {
          name: '王小二',
          time: '2019-01-22',
          status: 1
        },
        {
          name: '王小二',
          time: '2019-01-22',
          status: 5
        },
        {
          name: '王小二',
          time: '2019-01-22',
          status: 5
        },
        {
          name: '王小二',
          time: '2019-01-22',
          status: 1
        },
      ],
      status: 0
    }
  },
  methods:{
    showPopup () {
      this.popupShow = true
    },
    chooseStatus (current) {
      current = parseInt(current)
      if (current === this.current) return
      this.current = parseInt(current)
      this.popupShow= false
      this.status = this.statusList[current].id
      this.getList({status: this.status || ''})
    },
    getList ({pageId, status}) {
      progressQuery({cid:this.globalData.cid, pageId, status}).then(data => {
        this.cp = data.current_page
        this.lp = data.last_page
        if (data.current_page === 1) { this.processList = data.data } else {
          this.processList = [...this.processList, ...data.data]
        }
      })
    }
  },
  mounted () {
    progressQuery({cid:this.globalData.cid}).then(data => {
      this.cp = data.current_page
      this.lp = data.last_page
      this.processList = data.data
    })
  }
}
</script>

<style scoped>
.list-header {
  position: relative;
  border-bottom: 0.5px solid #eee;
  background: #fff;
  display: flex;
  text-align: center;
  color: #A6A6A6;
  line-height: 45px;
}
.list-header-item {
  flex: 1;
}
.triangle-bot {
  position: absolute;
  right: 20px;
  top: 20px;
  border: 0.4rem solid #eee;
  border-color: #D9D9D9 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}
.popup {
  padding: 1rem 1rem 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.status {
  margin-bottom: 1rem;
  width: 70px;
  border-radius: 2px;
  text-align: center;
  line-height: 2rem;
}
.status-on {
  border: 0.5px solid #F14E2C;
  color: #F14E2C;
}
.status-off {
  border: 0.5px solid #D9D9D9;
  color: #D9D9D9;
}
.mask {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: rgba(0,0,0,0.40);;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.list-content-row {
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 30px;
}
.process-name {
  flex: 1;
  color: #5B5B5B;
}
.process-time {
  flex: 1;
  font-size: 12px;
  color: #8D8D8D;
}
.process-status {
  flex: 1;
  color: #D0021B;
}
</style>
